<template>
	<view>
		<div style="height:50rpx;background:#fff"></div>
		<div class="header">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{type}}{{$t('详情')}}
		</div>
		<!-- <u-search shape="round" :showAction="true" placeholder="请输入仓库名称/仓库编号" class="searchSty"></u-search> -->
		<view class="bg-white mt-24 ml-24 mr-24 rounded-26" v-if="infoList">
			<p class="fz28 text-111 pt-34 ml-24 font-bold">{{$t('申请人')}}</p>
			<view class="h-80 ml-24 mr-24 bg-F7 flex-start rounded-26 mt-24" >
				<view class="carBox" v-if="infoList.request_user&&infoList.request_user.car">
					<view class="carCard">
						<span class="ml-11">{{infoList.request_user.car.car_number}}</span>
					</view>
				</view>
				<div class="fz30 font-bold ml-15 mt-20">{{infoList.request_user.username}}</div>
			</view>
			<p class="fz28 text-111 pt-34 ml-24 font-bold">{{$t('申请说明')}}</p>
			<view class="textareaSty" v-if="infoList&&infoList.remark">
				<p class="pt-24 ml-24 mr-24">{{infoList.remark.remark}}</p>
			</view>
			<p class="fz28 text-111 pt-34 ml-24 font-bold" v-if="infoList.image">{{$t('附件')}}</p>
			<view class="item_photo" v-if="infoList.images" v-for="(it,ind) in infoList.images" :key="ind">
				<!-- <image v-for="item in handlingInfo.attachment" class="ph" :src="IMAGE_URL + item.path" mode="aspectFill"></image> -->
				<image :src="IMAGE_URL+it" class="ph" mode=""></image>
				<!-- <image src="../../../static/img/ph_1.png" class="ph" mode=""></image>
				<image src="../../../static/img/ph_1.png" class="ph" mode=""></image> -->
			</view>
			
			<view v-if="infoList.status!=1" style="padding:20px;margin-top: 30px; margin-bottom: 30px;">
				{{$t('状态')}}:<text v-if="infoList.status==1">{{$t('申请中')}}</text> <text v-if="infoList.status==2">{{$t('已同意')}}</text>  <text v-if="infoList.status==3">{{$t('已拒绝')}}</text>
			</view>
		</view>
		<view class="footerSty" v-if="infoList.status==1">
			<view class="btn_yellow" @click="jujue(infoList.id)">
				{{$t('拒绝')}}
			</view>
			<view class="btn_blue" @click="tongyi(infoList.id)">
				{{$t('同意')}}
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import {invite_info,agree_request,jujue_request} from '@/api/basic'
	export default {
		data() {
			return {
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				rules: {},
				id:'',
				type:'',
				infoList:{}
			}
		},
		methods: {
			back() {
				this.cback()
			},
			info(){
				var that = this
				invite_info({id:this.id}).then((res) => {
					that.infoList = res.data.data.data;
					console.log(that.infoList);
				})
			},
			jujue(id){
				uni.showModal({
				  title: this.$t('提示'),
				  content: this.$t('确定拒绝吗'),
				  success: function (res) {
				    if (res.confirm) {
						jujue_request({id:id}).then((res) => {
							uni.showToast({
								title:'操作成功'
							})
							setTimeout(function(){
								uni.navigateBack(-1)
							},2000)
						})
				    } else if (res.cancel) {
				      console.log('用户点击取消');
				    }
				  }
				});
			},
			tongyi(id){
				uni.showModal({
				  title: this.$t('提示'),
				  content: this.$t('确定同意吗'),
				  success: function (res) {
				    if (res.confirm) {
						agree_request({id:id}).then((res) => {
							uni.showToast({
								title:'操作成功'
							})
							setTimeout(function(){
								uni.navigateBack(-1)
							},2000)
						})
				    } else if (res.cancel) {
				      console.log(this.$t('用户点击取消'));
				    }
				  }
				});
			}
		},
		onLoad(options) {
			if(options){
				if(options.type){
					if(options.type==1){
						this.type = this.$t('邀请')
					}else{
						this.type = this.$t('解绑')
					}
				}
				if(options.id){
					this.id = options.id
					this.info()
				}
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F6F7FB;
	}
.header {
		font-size: 34rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
		padding-top: var(--status-bar-height);
		background: #fff;
	}
	.back {
		position: absolute;
		width: 70rpx;
		height: 70rpx;
		top: 15rpx;
	}
	.textareaSty {
		min-height: 226rpx;
		border-radius: 18rpx;
		// border: 2rpx solid #D8D8D8;
		background: #F7F7F7;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 24rpx;
	}
	.searchSty {
		/deep/ .u-search__content {
			background-color: #fff !important;
			height: 78rpx;
			margin-left: 24rpx;
			margin-top: 14rpx;
		}
		/deep/ .u-search__content__input {
			background-color: #fff !important;
		}
		 // .u-search__action--active
		/deep/ .u-search__action {
			background-color: #278aff;
			height: 70rpx;
			width: 134rpx;
			font-size: 28rpx;
			color: #fff;
			border-radius: 500rpx;
			line-height: 70rpx;
			margin-left: -100rpx;
			margin-top: 12rpx;
			margin-right: 20rpx;
		}
		/deep/ .u-icon__icon {
			font-size: 40rpx !important;
		}
	}
	.carBox {
		// width: 194rpx;
		height: 44rpx;
		border-radius: 6px;
		background: #FCCE00;
		margin-left: 20rpx;
		margin-top: 20rpx;
		.carCard {
			// width: 186rpx;
			height: 38rpx;
			flex-shrink: 0;
			border-radius: 6rpx;
			border: 0.5rpx solid rgba(29, 29, 29, 0.47);
			border-radius: 6rpx;
			// background: #FCCE00;
			color: #1D1D1D;
			font-family: "PingFang SC";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 500;
			letter-spacing: 1rpx;
			padding-right: 20rpx;
			margin: auto;
		}
	}
	.footerSty {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 128rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-evenly;
		.btn_yellow {
			width: 338rpx;
			height: 94rpx;
			border-radius: 500rpx;
			// border: 2rpx solid rgba(241, 122, 3, 0.10);
			background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 94rpx; /* 118.75% */
			text-align: center;
			margin-top: 15rpx;
			// padding-bottom: 30rpx;
		}
		.btn_blue {
			width: 338rpx;
			height: 94rpx;
			border-radius: 500rpx;
			// border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 94rpx; /* 118.75% */
			text-align: center;
			margin-top: 15rpx;
			// padding-bottom: 30rpx;
		}
	}
	.item_photo{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start; 
		flex-wrap: wrap;
		gap: 18rpx;
		padding:20rpx 0;
		margin-left:24rpx;
		.ph{
			display: block;
			width: 200rpx;
			height: 200rpx;
			flex-shrink: 0;
			border-radius: 15rpx;
		}
	}
</style>
